<script>
import { mapState } from 'vuex';
import topoUtil from '../util/topo-util';
import { Animate, getAnimate } from '../util/animate';

export default {
    name: 'View',
    props: {
        editMode: {
            type: Boolean,
            default: false,
        },
        selected: {
            type: Boolean,
            default: false,
        },
        detail: {
            type: Object,
            default: {},
        },
    },
    computed: {
        textAlign: function () {
            if (this.detail.style.textAlign == undefined) {
                return 'center';
            } else {
                return this.detail.style.textAlign;
            }
        },
        lineHeight: function () {
            if (this.detail.style.lineHeight == undefined) {
                return this.detail.style.position.h;
            }
            return this.detail.style.lineHeight;
        },
        foreColor: function () {
            return this.detail.style.foreColor + '-' + this.detail.style.lineWidth;
        },
        ...mapState({
            mqttTimer: (state) => state.topoEditor.mqttTimer,
        }),
    },
    data() {
        return {
            animateView: null,
            paramValue: '', //参数绑定值
            actionValue: '', //动画绑定值
            topoUtil: topoUtil,
        };
    },
    watch: {
        mqttTimer() {
            this.initData();
        },
        foreColor() {
            try {
                this.onResize();
            } catch (error) {}
        },
    },
    mounted() {
        if (this.detail.componentShow.indexOf('动画') > -1 && !this.editMode) {
            this.animationInit();
        }
        setTimeout(() => {
            this.initData();
        }, 1000);
    },
    methods: {
        initData() {
            //设备绑定参数初始化
            if (this.detail.dataBind && this.detail.dataBind.imei != undefined && this.detail.dataBind.paramField != undefined) {
                let paramValue = sessionStorage.getItem(this.detail.dataBind.imei + '-' + this.detail.dataBind.paramField);
                if (typeof this.detail.dataBind.acquisitionFormula == 'string' && this.detail.dataBind.acquisitionFormula && !isNaN(paramValue)) {
                    let acquisitionFormula = this.detail.dataBind.acquisitionFormula;
                    acquisitionFormula = acquisitionFormula.replace('A', paramValue);
                    paramValue = this.topoUtil.checkData(acquisitionFormula);
                }
                if (paramValue != null) {
                    this.paramValue = paramValue;
                }
            }

            //动画绑定参数初始化
            if (this.detail.dataAction && this.detail.dataAction.imei != undefined && this.detail.dataAction.paramField != undefined) {
                let actionValue = sessionStorage.getItem(this.detail.dataAction.imei + '-' + this.detail.dataAction.paramField);
                if (actionValue != null) {
                    this.actionValue = actionValue;
                }
                if (!isNaN(actionValue)) {
                    if (typeof this.detail.dataBind.acquisitionFormula == 'string' && this.detail.dataBind.acquisitionFormula) {
                        let acquisitionFormula = this.detail.dataBind.acquisitionFormula;
                        acquisitionFormula = acquisitionFormula.replace('A', actionValue);
                        actionValue = this.topoUtil.checkData(acquisitionFormula);
                    }
                    let isGd = topoUtil.judgeSize(this.detail.dataAction.paramJudge, actionValue, this.detail.dataAction.paramJudgeData);
                    if (isGd) {
                        if (this.detail.dataBind.xyAction) {
                            //显隐判断
                            getAnimate().set(document.getElementById(this.detail.identifier), {
                                display: 'block',
                            });
                        }
                        if (this.animateView) {
                            this.animateView.play();
                        }
                    } else {
                        if (this.detail.dataBind.xyAction) {
                            //显隐判断
                            getAnimate().set(document.getElementById(this.detail.identifier), {
                                display: 'none',
                            });
                        }
                        if (this.animateView) {
                            this.animateView.pause();
                        }
                    }
                }
            }
            // console.log('mqtt初始化', this.paramValue, this.actionValue);
            //VR参数初始化
            if (this.detail.style.markers) {
                this.detail.style.markers.forEach((element) => {
                    let paramValue = sessionStorage.getItem(element.dataBind.imei + '-' + element.dataBind.paramField);
                    if (typeof this.detail.dataBind.acquisitionFormula == 'string' && this.detail.dataBind.acquisitionFormula && !isNaN(paramValue)) {
                        let acquisitionFormula = element.dataBind.acquisitionFormula;
                        acquisitionFormula = acquisitionFormula.replace('A', paramValue);
                        paramValue = this.topoUtil.checkData(acquisitionFormula);
                    }
                    if (paramValue != null && this.markersPlugin) {
                        let paramName = element.dataBind.paramName;
                        let unit = element.dataBind.paramUnit == null ? '' : element.dataBind.paramUnit;
                        sessionStorage.setItem('ps-marker-' + element.id, paramName + '：' + paramValue + unit);
                    }
                });
            }
        },
        animationInit() {
            // console.log('开始初始化动画');
            let domId = document.getElementById(this.detail.identifier);
            let display = 'block';
            let rotate = [];
            let scale = [];
            let translates = [];
            let duration = 1000;
            let autoplay = false;
            let loop = true;
            if (this.detail.dataAction.duration) {
                duration = this.detail.dataAction.duration * 1000;
            } else if (this.detail.dataAction.rotationSpeed == '快') {
                duration = 500;
            } else if (this.detail.dataAction.rotationSpeed == '中') {
                duration = 1000;
            } else if (this.detail.dataAction.rotationSpeed == '慢') {
                duration = 1500;
            } else {
                duration = 1000;
            }
            if (this.detail.dataBind.xzAction) {
                //旋转判断
                rotate.push(360);
            } else {
                rotate.push(0);
            }
            if (this.detail.dataBind.ssAction) {
                //闪烁判断
                scale.push(0.7);
                scale.push(1);
                scale.push(1.3);
                scale.push(1);
            } else {
                scale.push(1);
            }
            if (this.detail.dataBind.hdAction) {
                //滑动判断
                this.detail.dataAction.translateList.forEach((element) => {
                    if (element.direction == '竖直') {
                        translates.push({ translateY: -element.position });
                    } else {
                        translates.push({ translateX: element.position });
                    }
                });
            }
            if (translates.length == 0) {
                translates.push({ translateX: 0 });
            }
            this.animateView = Animate(domId, display, rotate, scale, translates, duration, autoplay, loop);
        },
    },
};
</script>
